<template>
	<view>
		<dy-button height="60rpx" background="var(--mainColor)" color="#fff" v-if="time == 60" @click="getCode">{{firstTime?'获取验证码': '重新获取'}}</dy-button>
		<dy-button height="60rpx" background="var(--mainColor)" color="#fff" v-else :ripple="true">倒计时{{time}}秒</dy-button>
		
		<u-popup v-model="show" mode="center" width="80%" borderRadius="20">
			<view class="">
				<view class="flex flex-column align-center u-p-y-30 u-p-x-40 w100">
					<text class="font text-dark">请输入图形验证码</text>
					<view class="flex justify-between align-center u-m-t-30 u-p-x-10 w100">
						<view class="u-p-l-20 rounded-10" style="border: 1px solid #ccc; width: 300rpx;">
							<u-input v-model="imgcaptcha" placeholder="输入图形验证码" maxlength="4"></u-input>
						</view>
						<image @click="getRandom" :src="`${$_BASE_IMG_API}/api/Captcha/get?identifier=${identifier}`" style="width: 180rpx;height: 70rpx;" mode=""></image>
					</view>
					<view class="flex justify-end u-m-t-10 w100">
						<text class="text-dark" @click="getRandom">看不清? 换一张</text>
					</view>
				</view>
				<view class="flex border w100">
					<text class="u-p-y-20 flex-1 u-font-24 text-dark text-center border-right" @click="show = false">取消</text>
					<text class="u-p-y-20 flex-1 u-font-24 text-dark text-center" @click="sure">确认发送</text>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		name:"dy-phone-code-button",
		props: {
			mobile: {
				type: String,
				default: ''
			},
			popup: {
				type: Boolean,
				default: true
			},
			size: {
				type: String,
				default: 'mini'
			},
			event: {
				type: String,
				default: 'register'
			}
		},
		data() {
			return {
				customStyle: {
					color: '#fff',
					backgroundColor: '#d22b1a'
				},
				show: false,
				timer: null,
				time: 60,
				firstTime: true,
				imgcaptcha: '',
				identifier: ''
			};
		},
		beforeDestroy() {
			if(this.timer) clearInterval(this.timer)
			console.log('beforeDestroy');
		},
		computed: {
			codeUrl() {
				return 
			}
		},
		created() {
			this.getRandom();
		},
		methods: {
			getCode() {
				if(!this.$u.test.mobile(this.mobile)) return this.$Toast('请输入正确的手机号')
				if(this.popup) return this.show = true
				this.sure()
			},
			sure() {
				console.log('获取手机验证码');
				let params = {
					mobile: this.mobile,
					perfix: 86,
					imgcaptcha: this.imgcaptcha,
					identifier: this.identifier,
					event: this.event
				}
				console.log('params', params);
				this.$store.dispatch('user/getCode', params).then(res=> {
					if(res.code == 1) {
						this.$Toast('发送成功')
						this.show = false
						this.timer = setInterval(()=> {
							this.time--
							if(this.time == 0) {
								clearInterval(this.timer)
								this.time = 60
							}
						},1000)
						this.firstTime = false
					} else {
						this.$Toast(res.msg)
					}
				})
			},
			getRandom() {
				console.log(1111);
				let random1 = parseInt(Math.random(0, 1) * 100000000);
				let random2 = parseInt(Math.random(0, 1) * 100000000);
				this.identifier = random1 + "abcdd" + random2 + "-" + new Date().getTime();
			}
		}
	}
</script>

<style lang="scss">

</style>
